<template>
  <!-- <div :class="className" :style="{height:height,width:width}" /> -->
  <!-- <div style="height: 440px;"> -->
  <div style="padding-bottom: 45px;">  
    <div class="fontWeight biaoti mb80">支付渠道使用统计<el-tooltip class="item" effect="dark" content="有史以来所有数据" placement="right"><i class="el-icon-question tipQuestion"></i></el-tooltip><span class="m20 font12 text-999">单位：次</span></div>
    <div style="height:300px;width:100%;" id="myChart_raddar">
      
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { channelTotalData } from "@/api/index";
const animationDuration = 3000

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      //this.chart = echarts.init(this.$el, 'macarons')
      channelTotalData().then((response) => {
          this.chart = echarts.init(document.getElementById('myChart_raddar'), 'macarons')
          this.chart.setOption({
           
            tooltip: {
                trigger: 'item',
                axisPointer: {            // Use axis to trigger tooltip
                    type: 'none'        // 'shadow' as default; can also be 'line' or 'shadow'
                },
                formatter: function (params) {
                  console.log(params);
                  if (params.value >= 100000000) {
                    return parseFloat(params.value / 100000000).toFixed(2) + "亿";
                  } else if (params.value >= 10000) {
                    return parseFloat(params.value / 10000).toFixed(2) + "万";
                  } else {
                    return params.value;
                  }
              },
            },
            grid: {
                left: '5%',
                right: '15%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                      show: false,
                },
                splitLine:{
            　　　　show:false
            　　 },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                splitArea: {
                    show: false
                },
            },
            yAxis: {
                type: 'category',
                data: response.data.yaxisData,
                inverse: true,//倒叙
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#333'
                  }
              },
            },
            series: [
                {
                    name: '次数',
                   
                    type: 'bar',
                    barWidth: '15px',
                    stack: 'total',
                    label: {
                        show: true,
                        position: 'right', //在上方显示
                        textStyle:{
                            color:'#333'
                        },
                        // formatter: '{value}w'
                        formatter: function (params) {
                            if (params.data >= 100000000) {
                              return parseFloat(params.data / 100000000).toFixed(2) + "亿";
                            } else if (params.data >= 10000) {
                              return parseFloat(params.data / 10000).toFixed(2) + "万";
                            } else {
                              return params.data;
                            }
                        },
                    },
                    itemStyle: {
                      normal: {
                          color: function(params) {
                              var colorList = ['#ee2750','#045aff', '#9040fd','#ffb100','#00e0b4'];
                              return colorList[params.dataIndex]
                          }
                      }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: response.data.seriesCountData,
                    animationDuration: animationDuration
                }
            ]
          })
      });
    }
  }
}
</script>
<style scoped lang="scss">
@media screen and (max-width: 480px) {
      .mb80{
        margin-bottom:0;
      }
    }
</style>